<template>
  <div ref="liqiud" class="liqiud" />
</template>
<script>
import * as echarts from 'echarts/core'
import 'echarts-liquidfill'
export default {
  name: 'Liqiud',
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      myLiuqiud: ''
    }
  },
  watch: {
    value(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
      this.initChart()
    }
  },
  mounted() {
    this.myLiuqiud = echarts.init(this.$refs.liqiud)
  },
  methods: {
    initChart() {
      debugger
      var option = {
        series: [{
          type: 'liquidFill',
          name: 'Liquid Fill',
          data: [{
            name: '' + this.value
          }, this.value * 0.01, (this.value * 0.5) * 0.01, (this.value * 0.25) * 0.01],
          label: {
            formatter: function(param) {
              return param.name + '%'
            },
            fontSize: 16
          }
        }]
      }
      this.myLiuqiud.setOption(option)
    }
  }
}
</script>
<style scoped>
</style>
